<template>
  <div class="loginpage">
	<div class="login_kang">
		<!-- <form> -->
			<div style="margin: 0 auto; margin-top: 10%; width: 60%;">
				<div style="margin: 0 auto; text-align: center;"><span style="font-size: 26px; font-weight: bold;">JSLOG交易交易系统</span></div>
				<div style="margin-top: 10%; text-align: center;">
					<span style="font-size: 18px; font-weight: bold;">账号:</span> <input type="text" v-model="username" style="width: 68%; height: 26px;" value=""/><br /><br />
					<span style="font-size: 18px; font-weight: bold;">密码:</span> <input type="text" v-model="passwd" style="width: 68%; height: 26px;" value=""/><br /><br />
					<input type="button" @click="login" style="font-size: 18px; font-weight: bold; width: 52%;" value="登 录"/><br /><br />
				</div>
			</div>
		<!-- </form> -->
	</div>
  </div>
</template>

<script>
	export default {
		name:"LoginView",
		data(){
			return {
				username:'',
				passwd:''
			}
		},
		methods:{
			login(){
				if(!this.username || this.username==null || this.v==''){
					alert('账号不可为空');
					return;
				}
				if(!this.passwd || this.passwd==null || this.passwd==''){
					alert('密码不可为空');
					return;
				}
				var that = this
				// 发送POST请求
				this.$axios.post('/api/v1/user/login', {
				    phone: this.username,
				    passwd: this.passwd
				}, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(function (response) {
					
					if(response.data.code == 200){
						localStorage.setItem('nick_name', response.data.data.Nickname);
						localStorage.setItem('token', response.data.data.Token);
						that.$router.push('/')
					}else{
						alert('登录失败')
					}
				});
			}
		}
	}
</script>

<style scoped>
	body{margin: 0;}
	*{top:0; bottom:0; padding:0; left: 0; right: 0;}
	.loginpage{
		background-image: url('/public/6.jpeg');
		width: 100%;
		height: 953px;
		position: absolute;
		padding-top: 15%;
	}
	.login_kang{
		width: 26%;
		height: 360px;
		display: flex;
		background: #C9C2AF;
		border-radius: 10px;
		margin: 0 auto;
	}
</style>